<template>
    <div class="box">
        <van-nav-bar
            title="我的销售单"
            class="navBar"
            left-arrow
            @click-left="back()"
            :border="false"
        ></van-nav-bar>
        <div class="container">
            <van-collapse v-model="modelList" class="van-col" :border="false">
                <van-collapse-item :name="index" v-for="item in state.months" :key="item.month" :border="false">
                    <template #title>
                        <div class="title">
                            <span class="time">{{item.month}}</span>
                            <div class="checkDetail r-btn">查看详情</div>
                        </div>
                        
                    </template>
                    <div class="content">
                        <div class="month-item" v-for="order in item.datas" :key="order.orderId">
                            <div class="month me-fx-row-ac"> 
                                <van-icon name="underway" size="1.25rem" color="#5e2f88" class="m-icon"/>
                                <time class="r-desc">{{ order.addtime }}</time>
                            </div>
                            <div class="money me-fx-row-ac">
                                <span class="s-title">金额:</span>
                                <span class="r-desc">{{ order.addtime }}</span>  
                            </div>
                            <div class="type me-fx-row-ac">
                                <span class="s-title">订单商品种类:</span>
                                <span class="r-desc">{{order.piabjkStatus==0?'零售':'套餐卡'}}</span>
                            </div>
                            <div class="right-detail me-fx-row-ac" @click="toDetail(order)">
                                详情<van-icon name="arrow" size="1.25rem" color="#adbac5" />
                            </div>
                        </div>
                    </div>
                </van-collapse-item>
            </van-collapse>
        </div>
        
    </div>
</template>
<script setup>
//1.未付款 2.待(提)收货 3.已完成 4.已关闭
const orderStatusFilter = [, "未付款", "待(提)收货", "已完成", "已关闭"];
import { useRouter } from "vue-router";
import { marketOrderList } from "api/sales.js";
import { onMounted, reactive,ref } from "vue";
import { useStore } from "vuex";

const router = useRouter();
const store = useStore();
const back = () => {
    router.back();
};

const state = reactive({
    months: [],
    loading: false,
    finished: false,
});
const modelList = ref([state.months]);
console.log(state);
const onLoad = async () => {
    var userInfo = store.getters["user/users"];
    let params = { staffNumber: userInfo.staffNo, storeId: userInfo.storeId };
    let res = await marketOrderList(params);
    let list = res.data;
    let months = []; // {month:'月份',total:月销售额,datas:[]}
    list.forEach((item) => {
        var index2 = item.createTime.lastIndexOf("-");
        var key = item.createTime.substring(0, index2);
        let dIndex = months.findIndex((t) => t.month == key);
        if (dIndex > -1) {
            let d = months[dIndex];
            d.datas.push(item);
            d.total += item.price;
        } else {
            months.push({
                month: key,
                total: item.price,
                datas: [item],
                isShow: false,
            });
        }
    });
    console.log(months);
    state.months = months;
};
onMounted(onLoad);

const toDetail = (item) => {
    router.push(`/sales/detail/${item.orderId}/${item.orderSn}`);
};
</script>
<style lang="scss" scoped src="../../styles/public.scss"></style>
<style lang="scss" scoped>
.van-col{
    color: #101D34;
    
    .title{
        display: flex;
        justify-content: space-between;
        
    }
    .r-btn{
        color: #8195A5;
    }
    .content{
        .month-item{
            .month,.money,.type{
                height: 1.5625rem;
            }
            .month{
                height: 1.875rem;
            }
            border-bottom: 1px solid #E5EBEF;
            &:last-of-type{
                border-bottom: none;
            }
            padding-bottom: .625rem;
            margin-bottom: .625rem;
            position: relative;
            .right-detail{
                position: absolute;
                top: 0;
                right: 0;
            }
        }
        .m-icon{
            margin-right: .625rem;
        }
        .s-title{
            width: 5.625rem;
            color: #49596D;
            text-align: left;
            margin-right: 1.5625rem;
            font-size: .875rem;
        }
        .r-desc{
            color:  #101D34;
        }
    }
}
</style>
<style scoped>
.container :deep() .van-collapse{
    border-radius: .625rem ;
    overflow: hidden;
}
.container :deep() .van-collapse-item__content{
    padding-bottom: 0;
}
.container :deep() .van-collapse-item{
    margin-bottom: .9375rem;
    border-radius: .625rem ;
    overflow: hidden;
    /* position: static; */
}
/* .container :deep() .van-hairline--top-bottom::after,.container :deep() .van-hairline-unset--top-bottom::after,.container :deep() .van-collapse-item--border{
    border: none;
} */
</style>